<!DOCTYPE html>
<html ng-app="myapp" lang="en">
<head>
  <meta charset="UTF-8">
  <title>Are you in a good mood today?</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="bower_components/jquery/jquery-ui.min.css">
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/angular/angular.min.js"></script>
	<script src="bower_components/jquery/jquery-ui.min.js"></script>
<style>
	.form-control{width: 165px!important;}
	#CurrentPrice{width: 50px;}
	.col-md-8 .table th, .col-md-8 .table  td { 
		text-align: center; 
	}
	.table > tbody > tr > td{
		vertical-align: middle;
	}
	.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td{
		vertical-align: middle;
	}
</style>
</head>
<body>
 <div class="container" ng-controller="myCtrl">
 	<div class="row">
 	<br>
 		 <div class="col-md-3">
 		 <table class="table">
				<tbody>
				  <tr>
					<td>Current Price <br /> (CAD):</td>
					<td>
						<span ng-click="hide()"  ng-show='showctrl' ng-bind="CurrentPrice | curr" >1</span><input id="CurrentPrice" ng-blur="show()" ng-model="CurrentPrice" ng-show='showctrl2' type="text"><i ng-show='showctrl' class="glyphicon glyphicon-pencil" style="color:red;margin-left:5px;" ng-click="hide()"></i>
					</td>
				  </tr>
				  <tr>
					<td>Exchange Rate <br /> (CAD->USD):</td>
					<td ng-bind="ExchangeRate"></td>
				  </tr>
				  <tr>
				  	<td>Converted Price <br />  (USD):</td>
					<td ng-bind="ConvertedPrice | curr"></td>
				  </tr>
				  <tr ng-show="silderBtn">
				  	<td colspan="2">
					  <p>
					  	Now Time：<span ng-bind="todayTime | date:'yyyy/MM/dd' "></span>
					  </p>
						<div id="slider"></div>
				  	</td>
				  </tr>
				  <tr>
				  	<td>Total Value  <br />  (USD):</td>
					<td ng-bind="TotalValue | curr | currency :'$'"></td>
				  </tr>
				  <tr>
					<td>Current Total Value  <br />  (USD):</td>
					<td ng-bind="Current | currency :'$'"></td>
				  </tr>
				  <tr>
					<td>Exchange Rate  <br />  (USD->CNY):</td>
					<td ng-bind="ExchangeRateCny"></td>
				  </tr>
				  <tr>
				  	<td>Total Value  <br />  (CNY):</td>
					<td>
						<strong  ng-bind="TotalValueCny | currency:'￥'"></strong>		
					</td>
				  </tr>
				  <tr>
					<td>Current Total Value  <br />  (CNY):</td>
					<td ng-bind="CurrentCny | currency:'￥'"></td>
				  </tr>
				</tbody>
			  </table>
 		 </div>

 		<div class="col-md-8">
 			<form class="form-inline" ng-submit="add(data)">
			  <div class="form-group">
                    <input required type="date" class="form-control" ng-blur="endTime(data.begin)" ng-model="data.begin" placeholder="Begins Time">
           	  </div> 
               <div class="form-group">
                   	<input required type="date" class="form-control" ng-model="data.expiration" placeholder="Expiration Time">
           	  </div>
			  <div class="form-group">
				<input required type="number" class="form-control" ng-model="data.quantity" placeholder="Quantity">
			  </div>
			  <div class="form-group">
				<input required type="text" class="form-control" ng-model="data.exercise" placeholder="Exercise Price(USD)">
			  </div>
			  <button type="submit" class="btn btn-default">Add</button>
			</form>
			<br>
 			<table class="table table-bordered">
				<thead>
				  <tr>
					<th>Operation</th>
					<th>Begins</th>
					<th>Expiration</th>
					<th>Quantity</th>
					<th>Exercise Price(USD)</th>
					<th>25%</th>
					<th>50%</th>
					<th>75%</th>
					<th>100%</th>
					<th>Total Value(USD)</th>
				  </tr>
				</thead>
				<tbody class="value">
				  <tr ng-repeat="list in dataList | orderBy">
					<td><a class="btn btn-default btn-small" ng-click="del($index)" role="button">Delete</a></td>
					<td ng-bind="list.begin | date:'yyyy/MM/dd'"></td>
					<td ng-bind="list.expiration | date:'yyyy/MM/dd'"></td>
					<td ng-bind="list.quantity | curr"></td>
					<td ng-bind="list.exercise | curr"></td>
					<td ng-bind="list.stage1  | date:'yyyy/MM/dd'"></td>
					<td ng-bind="list.stage2  | date:'yyyy/MM/dd'"></td>
					<td ng-bind="list.stage3  | date:'yyyy/MM/dd'"></td>
					<td ng-bind="list.stage4  | date:'yyyy/MM/dd'"></td>
					<td ng-bind="list.total | curr | currency:'$'"></td>
				  </tr>
				</tbody>
			  </table>
 		</div>
 	</div>
 </div>
 <script src="demoController.js">
	</script>
</body>
</html>